<template>
  <van-nav-bar
    v-bind="$attrs"
    :title="title"
    fixed
    placeholder
    :left-arrow="leftArrow"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
</template>

<script>
import { NavBar } from "vant";

export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    leftArrow: {
      type: Boolean,
      default: true,
    },
  },
  //组件注入
  components: { vanNavBar: NavBar },
  //存放数据
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      console.log("返回");
      this.$router.go(-1); //返回上一层
    },
    onClickRight() {
      this.$emit("click-right");
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-nav-bar {
  background: #e54437;
  z-index: 99;

  .van-nav-bar__title {
    color: #fff;
    font-size: 24px;
  }

  &.van-hairline--bottom::after {
    display: none;
  }
}

/deep/ .van-nav-bar__right {
  .van-nav-bar__text {
    color: #fff;
    font-size: 16px;
  }
}

/deep/ .van-nav-bar .van-icon {
  color: #ffffff;
  font-size: 24px;
}
</style>
